<template>
  <div class="login-container">
    <!-- 动态星空背景 -->
    <div id="particles-js" class="particles-bg"></div>
    <div class="stars"></div>
    <div class="stars2"></div>
    <div class="stars3"></div>
    
    <!-- 登录表单 -->
    <div class="login-box">
      <h1 class="title">太空机长</h1>
      <el-form ref="loginForm" :model="form" label-position="top">
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="指挥官账号"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="星际密码"
            prefix-icon="el-icon-lock"
            show-password
          ></el-input>
        </el-form-item>
        
        <el-form-item prop="captcha" class="captcha-group">
          <el-input
            v-model="form.captcha"
            placeholder="请输入验证码"
            prefix-icon="el-icon-picture-outline"
            style="width: 160px; margin-right: 10px;"
          ></el-input>
          <div class="captcha-image">
            <img :src="captchaImage" alt="验证码" @click="refreshCaptcha">
            <el-tooltip content="看不清？点击刷新" placement="top">
              <i class="el-icon-refresh" @click="refreshCaptcha"></i>
            </el-tooltip>
          </div>
        </el-form-item>
        
        <el-button
          type="primary"
          class="login-btn"
          @click="handleLogin"
          :loading="loading"
          round
        >
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login, getCh } from '@/api/login'

const router = useRouter()
const loading = ref(false)
const captchaImage = ref('')
const sessionId = ref('')
const form = ref({
  username: '',
  password: '',
  captcha: '',
  sessionId: ''
})

// 获取验证码
const refreshCaptcha = async () => {
  try {
    const response = await getCh()
    console.log(response);
    if (response.data.code === '200') {
      captchaImage.value = response.data.data.captchaImage
      sessionId.value = response.data.data.sessionId
    } else {
      ElMessage.error(response.data.msg || '获取验证码失败')
    }
  } catch (error) {
    ElMessage.error('获取验证码失败，请重试')
    console.error('获取验证码失败', error)
  }
}

onMounted(() => {
  // 页面加载时获取验证码
  refreshCaptcha()
})

// 登录处理
const handleLogin = async () => {
  if (!form.value.username || !form.value.password || !form.value.captcha) {
    ElMessage.error('请填写所有登录信息')
    return
  }
  
  form.value.sessionId = sessionId.value
  loading.value = true
  
  try {
    const response = await login(form.value)
    if (response.data.code === '200') {
      ElMessage.success('登录成功')
      setTimeout(() => {
        router.push({ name: 'Topic' })
      }, 500)
    } else {
      ElMessage.error(response.data.msg || '登录失败')
    }
  } catch (error) {
    ElMessage.error('登录失败，请重试')
    console.error('登录失败', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  background: #000;
  overflow: hidden;
  position: relative;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/src/assets/SpacePlane.jpg') no-repeat center center; /* 替换为你的背景图片路径 */
  background-size: cover;
  /* opacity: 0.2; 半透明效果，可以根据需要调整透明度 */
  z-index: -1; /* 确保背景图片在内容下方 */
}

/* 动态粒子 */
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


/* 星星背景 */
.stars, .stars2, .stars3 {
  position: fixed;
  width: 300%;
  height: 300%;
  background: 
    radial-gradient(2px 2px at 20% 30%, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 80% 70%, #fff, rgba(0,0,0,0));
  animation: moveStars 200s linear infinite;
  z-index: 1;
  pointer-events: none;
}

.stars2 {
  animation-duration: 150s;
  opacity: 0.6;
}

.stars3 {
  animation-duration: 100s;
  opacity: 0.4;
}

/* 登录框 */
.login-box {
  position: relative;
  z-index: 2;
  width: 400px;
  padding: 40px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(87, 154, 255, 0.2);
  backdrop-filter: blur(10px);
  margin: 100px auto;
}

@keyframes moveStars {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

.title {
  color: #57a0ff;
  text-align: center;
  font-size: 2.5em;
  text-shadow: 0 0 10px rgba(87, 154, 255, 0.5);
  margin-bottom: 30px;
}

.login-btn {
  width: 100%;
  background: linear-gradient(45deg, #57a0ff, #ff47a0);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.login-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(87, 154, 255, 0.5);
}

.login-btn:active {
  transform: scale(0.98);
}

.captcha-group {
  display: flex;
  align-items: center;
}

.captcha-image {
  position: relative;
  display: flex;
  align-items: center;
}

.captcha-image img {
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
}

.el-icon-refresh {
  cursor: pointer;
  font-size: 16px;
  color: #57a0ff;
}

.el-icon-refresh:hover {
  color: #ff47a0;
}
</style>